<template>
  <div class="edit">
    <van-nav-bar
      title="编辑资料"
      left-arrow
      @click-left="$router.push('/layout/mine')"
    ></van-nav-bar>
    <!-- 跳转到上一个页面：$router.go(-1)   $router.back() -->
    <van-uploader :before-read="beforeRead" :after-read="afterRead">
      <div class="user-img">
        <img class="avatar" :src="userInfo.photo" alt="" />
      </div>
    </van-uploader>
    <van-cell-group>
      <van-cell
        title="名称"
        :value="userInfo.name"
        is-link
        @click="nameShow = true"
      ></van-cell>
      <!-- 过滤器：用于{{}}和v-bind -->
      <!-- 作用：用于字符转换 -->
      <!-- 特点：它内部不能使用this -->
      <!-- 用法： -->
      <!-- 局部过滤器： -->
      <!-- filters:{ -->
      <!-- 过滤器方法名(参数值){return 新的值  } } -->
      <!-- {{ 实参值 | 过滤器方法名 }}   -->
      <van-cell
        title="性别"
        @click="showGender = true"
        :value="userInfo.gender2"
        is-link
      ></van-cell>
      <van-cell
        title="生日"
        @click="birthdayShow = true"
        :value="userInfo.birthday"
        is-link
      ></van-cell>
    </van-cell-group>
    <!-- 用户信息修改 -->
    <!-- 弹出层组件：  van-popup  v-model:用于控制是否显示 -->
    <!-- 用户名修改：
        1：定义修改用户信息api
        2:导入api
        3:调用api修改
        4：修改成功：
            提示
            关闭弹框
            更新vuex中的用户信息   -->
    <!-- <van-popup v-model="nameShow" style="width:80%;border-radius:10px">
      <h3 class="title">修改名称</h3>
      <van-field v-model.trim="name" class="field"></van-field>
      <div class="btn">
        <van-button class="btn-item" @click="nameShow = false">取消</van-button>
        <van-button class="btn-item" @click="nameSubmit">
          <span style="color:red;">
            确定
          </span>
        </van-button>
      </div>
    </van-popup> -->
    <!-- dialog常用于纯提示性处理 -->
    <van-dialog
      title="修改名称"
      v-model="nameShow"
      show-cancel-button
      @confirm="nameSubmit"
      @closed="name = $store.state.userInfo.name"
    >
      <van-field v-model.trim="name" class="field"></van-field>
    </van-dialog>
    <!-- 性别修改
    1：完成而局
    2:点击打开修改弹框，点击相应的项确定修改
      调用接口修改
      修改成功：1：提示  2：关闭弹框  3：更新vuex的用户信息数据    -->
    <van-popup v-model="showGender" style="width:100%;" position="bottom">
      <van-nav-bar
        title="修改性别"
        left-text="取消"
        @click-left="showGender = false"
      ></van-nav-bar>
      <van-cell
        v-if="userInfo.gender === 1"
        title="男"
        is-link
        @click="genderSubmit(0)"
      ></van-cell>
      <van-cell v-else title="女" is-link @click="genderSubmit(1)"></van-cell>
    </van-popup>
    <!-- 生日修改
    1：布局
    2：点击打开修改生日弹框
    3：修改完成
       1：调用api接口
       2：调用公共方法传值
       datetimer-picker
         v-model:当前的时间值（时间对象） 
         type:时间类型（默认date,年月日选择）
         title:标题
         min-date:最小时间
         max-date:最大时间  -->
    <van-popup
      v-model="birthdayShow"
      position="bottom"
      @closed="birthdayClosed"
    >
      <van-datetime-picker
        v-model="birthday"
        type="date"
        title="修改生日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="birthdayShow = false"
        @confirm="birthdaySubmit"
      ></van-datetime-picker>
    </van-popup>
    <!-- 裁切图片 -->
    <div class="crop" v-if="cropShow">
      <!-- 裁切插件
        1：下载  yarn add vue-cropper  
        2：导入  import { VueCropper }  from 'vue-cropper' 
                    components: {
                      VueCropper
                    }
        3:使用
           VueCropper
              img:支持url,base64,blob
              autoCrop:是否默认生成裁切框
       -->
      <VueCropper
        :img="imgBase64"
        ref="cropper"
        autoCrop
        autoCropWidth="200px"
        autoCropHeight="200px"
        fixed
      ></VueCropper>
      <div class="crop-btn">
        <van-button class="crop-item" type="danger" @click="cropSubmit"
          >裁剪</van-button
        >
        <van-button class="crop-item" @click="cropShow = false"
          >取消</van-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { userProfilePatch, userPhotoPatch } from '@/api/mine'
import moment from 'moment'
import { VueCropper } from 'vue-cropper'
export default {
  components: {
    VueCropper
  },
  data () {
    return {
      obj: {
        a: 0
      },
      cropShow: false,
      nameShow: false,
      showGender: false,
      birthdayShow: false,
      name: this.$store.state.userInfo.name,
      minDate: new Date('1979/01/01'),
      maxDate: new Date(),
      birthday: new Date(this.$store.state.userInfo.birthday),
      imgBase64: ''
    }
  },
  filters: {
    // vue3不用了
    setGender (val) {
      return val === 0 ? '男' : '女'
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  watch: {
    // watch:作用：监听某个值的变化 ，某个值的change事件
    /*
    用法：
       watch:{
           监听的数据
           "obj":{
            handler(newVal,oldVal){
              newVal:当前值
              oldVal:修改上一刻的值
            },
            deep:是否深度监听，默认是false(只监听栈的变化)
                                    true(堆与栈都监听) }
            immediate:是否立即执行回调函数
       }   */
    obj: {
      handler (newVal) {
        console.log('watch:', newVal)
      }
    },
    nameShow: {
      handler (newVal) {
        if (!newVal) {
          // this.name = this.$store.state.userInfo.name
        }
      }
    }
  },
  created () {
    // this.$store.dispatch('getUserInfo')
  },
  methods: {
    // 名称修改确定点击
    async nameSubmit () {
      this.setUser('name', this.name, 'nameShow')
      // // 有修改且有值才调用接口
      // if (this.name === this.userInfo.name || this.name === '') {
      //   this.$toast.fail('请修改后再提交')
      //   return
      // }
      // // 调用接口修改用户名
      // await userProfilePatch({
      //   name: this.name
      // })
      // // 提示一下
      // this.$toast.success('修改用户名成功')
      // // 关闭弹框
      // this.nameShow = false
      // // 通过mutations方法更新用户信息
      // this.$store.commit('setUserInfo', {
      //   ...this.userInfo,
      //   name: this.name
      // })
    },
    // 性别修改
    async genderSubmit (num) {
      this.setUser('gender', num, 'showGender')
      // if (num === this.userInfo.gender) {
      //   this.$toast.fail('请修改后再提交')
      //   return
      // }
      // // 调用接口修改性别
      // await userProfilePatch({
      //   gender: num
      // })
      // // 提示一下
      // this.$toast.success('修改性别成功')
      // // 关闭弹框
      // this.genderShow = false
      // // 通过mutations方法更新用户信息
      // this.$store.commit('setUserInfo', {
      //   ...this.userInfo,
      //   gender: num
      // })
    },
    // 生日修改
    birthdayClosed () {
      this.birthday = new Date(this.userInfo.birthday)
    },
    birthdaySubmit () {
      // 时间转换用：moment时间转换
      // 1：下载安装
      // 2：导入
      // 3：  moment(传入时间值)).format("YYYY-MM-DD")
      this.setUser(
        'birthday',
        moment(this.birthday).format('YYYY-MM-DD'),
        'birthdayShow'
      )
    },
    async setUser (key, value, str, msg = '修改成功') {
      // 有修改且有值才调用接口
      if (value === this.userInfo[key] || value === '') {
        this.$toast.fail('请修改后再提交')
        return
      }
      // 调用接口修改用户名
      await userProfilePatch({
        [key]: value
      })
      // 提示一下
      this.$toast.success(msg)
      // 关闭弹框
      this[str] = false
      // 通过mutations方法更新用户信息

      this.$store.commit('setUserInfo', {
        ...this.userInfo,
        [key]: value
      })
      // if (key === 'gender') {
      //   this.$store.commit('setUserInfo', {
      //     ...this.userInfo,
      //     gender2: value === 0 ? '男' : '女'
      //   })
      // }
    },
    // 上传前限制
    beforeRead (file) {
      // file.size  file.type  png/jpg/gif...
      const typeArr = ['image/png', 'image/jpeg']
      const limitType = typeArr.includes(file.type)
      if (!limitType) {
        this.$toast.fail('请上传jpg与png图片')
      }
      const limitSize = file.size / 1024 / 1024 < 1
      if (!limitSize) {
        this.$toast.fail('请上传1Mb以内图片图片')
      }
      return limitType && limitSize
    },
    // 上传后的处理
    afterRead (res) {
      this.cropShow = true
      this.imgBase64 = res.content
      console.log('afterRead', res)
    },
    // 裁切方法
    cropSubmit () {
      this.$refs.cropper.getCropBlob(async res => {
        // 调用接口实现头像上传（文件上传）
        // base64  就是以前做法普通传参就可以了
        // file   FormData数据使用方式
        /*
          FormData数据使用方式
          a:定义一个formData对象
             const _formdata=new FormData()
          b:往formData对象加入参数
            _formdata.append('属性名',值)
            后续直接使用_formdata
        */
        // 1：定义接口api
        // 2:导入与调用
        // 3：参数要转换成formData数据格式
        // 4：上传完成：接口都会返回：文件地址
        // 5：实现头像修改功能,更新vuex中的数据，且关闭弹框，且要提示
        // 将数据转换成formdata数据格式
        const formData = new FormData()
        formData.append('photo', res)
        // 调用上传接口
        const res2 = await userPhotoPatch(formData)
        // 更新vuex中的头像
        this.$store.commit('setUserInfo', {
          ...this.userInfo,
          photo: res2.data.data.photo
        })
        // 提示
        this.$toast.success('更新头像成功')
        // 关闭弹框
        this.cropShow = false
        console.log(res2)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.user-img {
  text-align: center;
  width: 100vw;
  padding: 10px;
  box-sizing: border-box;
  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    // background-size:cover/contain
    // cover:保持比例，超出的会裁切
    // contain：保持比例，完整显示，不够部分不理
    object-fit: cover;
  }
}
.title {
  text-align: center;
  padding: 15px;
}
.field {
  border-top: 1px solid #eff1f3;
  // border-bottom: 1px solid #ccc;
}
.btn {
  display: flex;
  .btn-item {
    flex: 1;
  }
}
.crop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  .crop-btn {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    justify-content: space-between;
    .crop-item {
      flex: 1;
    }
  }
}
</style>
